<template>
    <div class="invitationRecord">
        <div class="nodata" v-show="noData">
            <img src="../../static/img/nodata.png" alt="">
            <p class="nodataTip">邀请记录为空,爱读书的小伙伴在哪呢?<br/>块邀请TA一起读书吧</p>
        </div>
        <ul class="inviteList">
            <li v-for="(item,index) in inviteList" :key="index">
                <div class="left">
                    <div class="img">
                        <img :src="item.img_path" alt="">
                    </div>
                    <p class="leftTip">{{item.user_nickname}}</p>
                </div>
                <p class="right">{{item.add_time*1000 | timeFormat}}</p>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'invitationRecord',
    data(){
        return{
            token: localStorage.getItem("token") ? localStorage.getItem("token") : "",
            tokenParams: {
                    token: localStorage.getItem("token") ?
                        localStorage.getItem("token") : ""
                },
            noData:false,
            inviteList:[],
        }
    },
    created(){
        this.getInviteList();
    },
    methods:{
        getInviteList(){
            this.axios.post(this.APIHOST+'home/getInviteList',this.tokenParams).then(r=>{
                if(r.data.code=='0'){
                    this.noData=false;
                     this.inviteList=r.data.data;
                }else{
                     this.noData=true;
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
    .invitationRecord{
        .nodata{
            padding-top: 20vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
                width: 30%;
            }
            .nodataTip{
                margin-top: 20px;
                line-height: 1.7em;
                color: #aaaaaa;
            }
            .submit{
                width: 150px;
                height: 80px;
                border: 1px solid #aaaaaa;
                border-radius: 80px;
                line-height: 80px;
                text-align: center;
                margin-top: 50px;
            }
        }
        .inviteList{
            width: 100%;
            li{
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;
                padding: 0 4%;
                height: 100px;
                line-height: 100px;
                border-bottom: 1px solid #bbbbbb;
                .left{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .img{
                        width: 80px;
                        height: 80px;
                        border-radius: 80px;
                        overflow: hidden;
                        margin-right: 20px;
                        img{
                            width: 100%;
                            
                        }
                    }
                }
            }
        }
    }
</style>


